import React, { useState, useEffect } from 'react';
import marked from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';
import "./style/markedP.less"

const renderer = new marked.Renderer();
marked.setOptions({
  renderer: renderer,
  gfm: true,
  pedantic: false,
  sanitize: false,
  // tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
  xhtml: false,
  highlight: function (code:any) {
    return hljs.highlightAuto(code).value;
  }

}); 

const Marked: React.FunctionComponent<any> = (props) => {
  console.log(props,'props--console')
  
  // let { markedInfo } = props
  useEffect(() => {
    // props.markedInfo.article_content?setnewHtml(marked(props.markedInfo.article_content)):""
    if(props.markedInfo.article_content){
      setnewHtml(marked(props.markedInfo.article_content))
    }
  }, [props])
  const [newHtml, setnewHtml] = useState("")
  return (
    <div className="markedBox">
      <div className="markedHeader">
        <span>文章名称：{ props.markedInfo.title }</span>
        <span>所属专题：{ props.markedInfo.shareTopicTitle }</span>
        <span>最近更新：{ new Date(props.markedInfo.updateTime).toLocaleDateString() }</span>
      </div>
      <div className="margedItem" dangerouslySetInnerHTML = {{__html:newHtml}}></div>
    </div>
  );
};

export default Marked;
